{% extends "user/dashboard_base.html" %}

{% block subcontainer %}

  <div class="todos bubble" id="todoContainer">

    <div id="todoList" class="todo-list to-do">

    <div class="todo-controls">
      <div id="todoAddDiv" class="todo-category">
        <div class="dropdown">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle"><i class="icon-inbox"></i>类别:{{scene.name}}<i class="icon-caret-down"></i></a>
          <div class="dropdown-menu">
            <ul class="nav nav-list">
              {%for scene in scene_list%}
              <li><a href="/dashboard/todo/{{scene.id}}/"><i class="icon-inbox"></i>{{scene.name}}</a></li>
              {%endfor%}
              <li id="addScene" class="create"><a href="javascript: void(0)"><i class="icon-pencil"></i>添加新类别</a></li>
              <li>
                <div id="sceneAddDiv" class="form-inline hide">
                  <input id="sceneAdd" type="text" placeholder="添加新的类别">
                  <a href="#" id="sceneAddButton" class="" type="submit">创建新类别</a>
                  <a href="#" id="sceneCancelButton" class="" type="submit">取消</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <input id="todoAdd" type="text" placeholder="添加新的todo，Enter添加">
        {#<button id="todoAddButton" class="" type="submit">添加</button>#}
        {%if not todoing_list and scene.name != ''%}
          <button id="sceneRemoveButton" class="" type="submit">删除类别</button>
        {%endif%}
      </div>
    </div>





      {%for todoing in todoing_list|slice:":20"%}
      <div id="todo-{{todoing.id}}" class="todo-item todo clearfix" data="{{todoing.id}}">
          <div class="drag-todo">
            <input class="todoCheck" type="checkbox" value="" class="pull-left">
          </div>
          <div class="todo"><p class="todoText">{{todoing.content}}</p></div>
          <a class="removeTodo control todo-control hide fade" title="删除" href="javascript: void(0)"><i class="icon-remove"></i></a>
          {% comment %}
            <div class="todoControl btn-group pull-right hide fade">
              <a class="goTop control first btn btn-mini" title="置顶" href="javascript: void(0)"><i class="icon-long-arrow-up"></i></a>
              <a class="goDown control middle btn btn-mini" title="置底" href="javascript: void(0)"><i class="icon-long-arrow-down"></i></a>
              <a class="removeTodo control last btn btn-mini" title="删除" href="javascript: void(0)"><i class="icon-remove"></i></a>
            </div>
          {% endcomment %}
      </div>
      {%endfor%}
    </div>

    <div id="todoneList" class="todo-list done">

      <div id="todoneDiv" class="inner">
      {%for todone in todone_list|slice:":10" %}
        <div id="todone-{{todone.id}}" class="todone todo-item" data="{{todone.id}}">
          <div class="drag-todo"><input class="todoneCheck" type="checkbox" value="" checked="checked"></div>
          <div class="todo"><p class="todoText"> {{todone.content}}</p></div>
        </div>
      {%endfor%}
      <div class="scrollbar">
        <a href="#"><i class="icon-angle-down"></i>更多</a>
      </div>
      </div>
    </div>

  </div>
{% endblock %}

{% block js %}
<!--script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script-->
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/jquery-ui.min.js"></script>
<!--script src="http://lib.sinaapp.com/js/jquery-ui/1.8.11/jquery-ui.min.js"></script-->
<script>
$(function(){
    moment.lang('zh-cn');

    $('.todo-item').live('mouseover mouseout', function(event) {
        if (event.type == 'mouseover') {
            $(this).find('.fade').fadeTo(0, 100);
        } else {
            $(this).find('.fade').fadeTo(0, 0);
        }
    });

    $('#todoAddButton').click(function(event) {
        var todoText = $('#todoAdd').val()
        add_todo(todoText)
    });
    $('#todoAdd').keydown(function (e) {
        if (e.keyCode == 10 || e.keyCode == 13) {
            var todoText = $(this).val()
            add_todo(todoText)
        }
    });
    function init_todo(todoId, todoText) {
        var todo = '<div id="todo-' + todoId + '" class="todo-item todo cleafix ui-draggable ui-droppable" data="' + todoId + '"> ' +
                    '<div class="drag-todo">' +
                    '<input class="todoCheck" type="checkbox" value=""></div>' +
                    '<div class="todo"><p class="todoText">' + todoText + '</p></div> ' +
                    '<a class="removeTodo control todo-control hide fade" title="删除" href="javascript: void(0)"><i class="icon-remove"></i></a>' +
                    '</div></div>';
        return todo;
    }
    function init_todone(todoId, todoText) {
        var todone = '<div id="todone-' + todoId + '" class="todone todo-item" data="' + todoId + '">' +
                     '<div class="drag-todo"><input class="todoneCheck" type="checkbox" value="' + todoId + '" checked></div>' +
                     '<div class="todo"><span class="todoText"> ' + todoText + '</span></div></div>';
        return todone;
    }
    function add_todo(todoText) {
        if(todoText == '') {
            return
        }
        $.post('/dashboard/todo/'+{{scene.id}}+'/add_todo/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'todoText': todoText}, function(json){
            var todoId = json.todoId;
            var todo = init_todo(todoId, todoText);
            $(todo).insertAfter('#todoList > .heading');
            drag_drop_init('#todo-'+todoId);
            $('#todoAdd').val('');
            $('a').tooltip();
        });
    }
    $('#addScene a').click(function(event) {
        $('this').hide();
        $('#sceneAddDiv').show();
    });
    $('#sceneCancelButton').click(function(event) {
        $('#sceneAddDiv').hide();
        $('#addScene').show();
    });
    $('#sceneAddButton').click(function(event) {
        var scene = $('#sceneAdd').val()
        add_scene(scene)
    });
    $('#sceneAdd').keydown(function (e) {
        if (e.keyCode == 10 || e.keyCode == 13) {
            var scene = $(this).val()
            add_scene(scene)
        }
    });
    function add_scene(scene) {
        $.post('/dashboard/todo/0/add/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'name': scene}, function(json){
            var scene_id = json.scene_id;
            window.location = '/dashboard/todo/'+ scene_id +'/';
        });
    }
    $('.todo').tooltip({
        selector: "a[rel=tooltip]"
    })
    function drag_drop_init(selector) {
        $(selector).draggable({
            live: true,
            cursor: 'move',
            revert: true
        });
        $(selector).droppable({
            live: true,
            accept: '.todo',
            hoverClass: 'todoMoveHovered',
            drop: handleTodoMoveDrop
        });
    }
    drag_drop_init('.todo');
    $('#todoneDiv').droppable({
        live: true,
        accept: '.todo',
        hoverClass: 'todoDoneHovered',
        drop: handleTodoDoneDrop
    });
    function handleTodoMoveDrop(event, ui){
        var from_todo_id = ui.draggable.attr('data');
        var to_todo_id = $(this).attr('data');
        var from_todo = $('#todo-'+from_todo_id);
        from_todo.remove();
        var i = 0;
        var index = 0;
        $('#todoList .todo').each(function(){
            if($(this).attr('data') == to_todo_id) {
                index = i;
            }
            i++;
        });
        var to_todo = $('#todo-'+to_todo_id);
        from_todo.insertBefore(to_todo);
        drag_drop_init('#todo-'+from_todo_id)
        $('a').tooltip();
        update_scene_meta()
    }
    function done_todo(todoId){
        var todoText = $('#todo-'+todoId).find('.todoText').text();
        $.post('/dashboard/todo/'+ {{scene.id}} +'/done_todo/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'todoId': todoId}, function(json){
            var result_todo_id = json.todoId;
            if(result_todo_id != 0) {
                $('#todo-'+todoId).remove();
                var todone = init_todone(todoId, todoText);
                $('#todoneDiv').prepend(todone);
            }
        });
    }
    function handleTodoDoneDrop(event, ui){
        var todoId = ui.draggable.attr('data');
        done_todo(todoId);
    }
    $('.todoCheck').on('click', function (e) {
        var todoId = $(this).parents('.todo').attr('data');
        done_todo(todoId);
    });
    $('.todoneCheck').on('click', function (e) {
        var todone_id = $(this).parents('.todone').attr('data');
        var todone_text = $('#todone-'+todone_id).find('.todoText').text();
        $.post('/dashboard/todo/'+ {{scene.id}} +'/doing_todo/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'todoId': todone_id}, function(json){
            var result_todo_id = json.todoId;
            if(result_todo_id != 0) {
                $('#todone-'+todone_id).remove();
                var todo = init_todo(todone_id, todone_text);
                $('#todoList').prepend(todo);
                drag_drop_init('#todo-'+todone_id);
                $('a').tooltip();
            }
        });
    });
    /*
    $('.goTop').on('click', function (e) {
        var todoId = $(this).parents('.todo').attr('data');
        var todoTop = $('#todo-'+todoId);
        todoTop.remove();
        $('#todoList').prepend(todoTop);
        drag_drop_init('#todo-'+todoId);
        $('a').tooltip();
        update_scene_meta()
    });
    $('.goDown').on('click', function (e) {
        var todoId = $(this).parents('.todo').attr('data');
        var todoDown = $('#todo-'+todoId);
        todoDown.remove();
        $('#todoList').append(todoDown);
        drag_drop_init('#todo-'+todoId);
        $('a').tooltip();
        update_scene_meta()
    });
    */
    $('.removeTodo').on('click', function (e) {
        var todoId = $(this).parents('.todo').attr('data');
        $.post('/dashboard/todo/'+ {{scene.id}} +'/remove_todo/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'todoId': todoId}, function(json){
            var result_todo_id = json.todoId;
            if(result_todo_id != 0) {
                $('#todo-'+todoId).remove()
            }
        });
    });
    $('#sceneRemoveButton').on('click', function (e) {
        if($(this).text() == '删除场景') {
            $(this).text('确定删除？');
            return;
        }
        if($(this).text() == '确定删除？') {
            $.post('/dashboard/todo/'+ {{scene.id}} +'/remove/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'sceneId': '{{scene.id}}'}, function(json){
                var result_scene_id = json.sceneId;
                if(result_scene_id != 0) {
                    window.location = '/dashboard/todo/';
                }
            });
        }
    });
    function update_scene_meta() {
        var todo_order_ids = []
        $('.todo').each(function() {
            var todoId = $(this).attr('data');
            todo_order_ids.push(todoId);
        });
        if(todo_order_ids.length > 0) {
            $.post('/dashboard/todo/'+ {{scene.id}} +'/update_scene_meta/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'todoIds': todo_order_ids.join(',')}, function(json){
                var result = json.result;
                if(result != 0) {
                    window.location = '/dashboard/todo/{{scene.id}}/';
                }
            });
        }
    }
});
</script>
{% endblock %}
